<template lang="html">
  <div>
    <div>
      <div v-show="showUserInfo">
        <div class="box">
          <input v-model="username" placeholder="用户名">
        </div>
        <div class="box">
          <input v-model="userMail" placeholder="邮箱">
        </div>
        <div class="box">
          <input v-model="userPhone" placeholder="手机">
        </div>
        <div @click="userRegister()" class="back">返回登录</div>
        <div @click="checkUser()" class="change">找回密码</div>

      </div>
      <div v-show="showRePassword">
        <div class="box">
          <input v-model="repassword" placeholder="输入新密码">
        </div>
        <div @click="changeUserPassword()" class="change">修改密码</div>

      </div>
    </div>


  </div>

</template>
<script>
  export default {
    data() {
      return {
        userMail: '',
        userPhone: '',
        username: '',
        repassword: '',
        showRePassword: false,
        showUserInfo: true,
      }
    },
    methods: {
      checkUser: function (event) {
        this.$http.post('http://localhost:5000/users/findPassword', {
          username: this.username,
          userMail: this.userMail,
          userPhone: this.userPhone
        }).then((data) => {
          if (data.body.status == 1) {
            // alert(data.body.message)
            this.$message({
              message: data.body.message,
              type: 'error'
            });
          } else {
            // alert(data.body.message)
            this.$message({
              message: data.body.message,
              type: 'success'
            });
            this.showRePassword = true
            this.showUserInfo = false
            console.log(this.showRePassword)
          }
        })
      },
      changeUserPassword: function (event) {
        this.$http.post('http://localhost:5000/users/findPassword', {
          username: this.username,
          userMail: this.userMail,
          userPhone: this.userPhone,
          repassword: this.repassword
        }).then((data) => {
          if (data.body.status == 1) {
            // alert(data.body.message)
            this.$message({
              message: data.body.message,
              type: 'error'
            });
          } else {
            // alert(data.body.message)
            this.$message({
              message:data.body.message,
              type: 'success'
            });
            this.$router.go(-1)
          }
        })
      },
      userRegister: function (event) {
        this.$router.push({
          path: 'Login'
        })
      },
    }

  }
</script>
<style scoped>
  .box{
    position: relative;
    left: 500px;
    top: 0px;
    height: 33px;
    width: 350px;
    border-radius: 25px;
    margin: 25px 0px;
    background:rgb(0, 0, 0,0.3) ;
  }

  input {
    position: absolute;
    left: 0%;
    top: 17%;
    width: 80%;
    height: 64%;
    background: transparent;
    /* border-radius: 5px; */
    font-size: 14px;
    border: none;
    /* border: 2px solid rgba(255, 255, 255, 0.3); */
    color: rgb(255, 255, 255, 0.7);
    padding: 0 7%;
    outline: none;
    letter-spacing: 3px;
  }

  .back {
    position: absolute;
    left: 500px;
    top: 290px;
    background: rgb(0, 0, 0, 0.3);
    width: 75px;
    height: 20px;
    border-radius: 25px;
    padding: 10px 15px;
    text-align: center;
    color: rgb(255, 255, 255, 0.5);
    cursor: pointer;
  }

  .change {
    position: absolute;
    left: 740px;
    top: 290px;
    background: rgb(0, 0, 0, 0.3);
    width: 75px;
    height: 20px;
    border-radius: 25px;
    padding: 10px 15px;
    text-align: center;
    color: rgb(255, 255, 255, 0.5);
    cursor: pointer;
  }
</style>